<template>
    <div style="display: flex;justify-content: space-around;">
        <textarea v-model="base64" style="width: calc(100% - 50px);" placeholder="请输入Base64"></textarea>
        <button type="button" @click="showImage">转换</button>
    </div>
    <div>
        <img v-show="!!src2" :src="src2" style="max-width: 600px; max-height: 600px;">
    </div>
</template>

<script setup lang="ts">
    import { ref, computed } from 'vue'
    const base64 = ref<string>('')
    const src2 = ref<string>('')

    const showImage = () => {
        src2.value = !base64.value || base64.value.startsWith("data:image/") ? base64.value : `data:image/png;base64,${base64.value}`
    }
    // const src = computed(() => (!base64.value || base64.value.startsWith("data:image/") ? base64.value : `data:image/png;base64,${base64.value}`))
</script>

<style lang="scss" scoped>

</style>